<template>
  <el-container>
    <el-aside style="width: 200px;margin-top: 20px">
      <!-- 书籍类别 -->
      <CourseMenu @indexSelect="listByCategory" ref="courseMenu"></CourseMenu>
    </el-aside>
    <el-main>
      <courses class="books-area" ref="coursesArea"></courses>
    </el-main>
  </el-container>
</template>

<script>
  import CourseMenu from './CourseMenu'
  import Courses from './Courses'

  export default {
    name: 'AppCourse',
    components: {Courses, CourseMenu},
    methods: {
      listByCategory () { // 书籍类别
        var _this = this
        var cid = this.$refs.courseMenu.cid // 类别id  通过点击传回来 再给下面的请求
        var url = '/course/' + cid + '/courses'
        this.$axios.get(url).then(resp => {
          if (resp && resp.data.code === 200) {
            _this.$refs.coursesArea.courses = resp.data.result
            _this.$refs.coursesArea.currentPage = 1
          }
        })
      }
    }
  }
</script>

<style scoped>
  .books-area {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }
</style>
